import React, { useEffect, useState, useCallback } from 'react';
import { Modal, VerificationCode, Message } from '@arco-design/web-react';
function InputPwdModal(props) {
  const { visible, handleChangeVisible, onConfirm } = props;

  const changeVisible = () => {
    handleChangeVisible(false);
  };

  const [password, setPassword] = useState('');
  const handlePwdChange = (value: string) => {
    setPassword(value);
  };

  const onOk = () => {
    if (password.length < 6) {
      Message.error('请输入六位的密码');
      return
    }
    onConfirm(password);
    changeVisible();
  };

  useEffect(() => {
    if (visible) {
      setPassword('');
    }
  }, [visible]);

  return (
    <Modal
      title="输入支付密码"
      visible={visible}
      onCancel={changeVisible}
      onOk={onOk}
    >
      <VerificationCode
        masked
        style={{ width: 300, marginLeft: '20px' }}
        value={password}
        onChange={handlePwdChange}
      />
    </Modal>
  );
}
export default InputPwdModal;
